<template>
  <el-drawer
      title="编辑"
      :visible.sync="visible"
      :before-close="handleClose"
      :destroy-on-close="true"
      :wrapperClosable="false"
      :size="this.drawerSize"
  >
    <div class="drawer-content">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="form.moduleName"></el-input>
        </el-form-item>
        <el-form-item label="父菜单">
          <el-cascader
              style="width: 100%"
              v-model="form.pId"
              :placeholder="placeholderSelect"
              :options="tableData"
              :props="optionProps"
              clearable
              :show-all-levels="false"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch v-model="form.showFlag"/>
        </el-form-item>
        <el-form-item label="是否外链">
          <el-switch v-model="form.isOut" @change="handleOut"/>
        </el-form-item>
        <el-form-item label="地址" v-show="outFlag">
          <el-input v-model="form.outHref"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="form.mOrder" type="number"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">确定</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import { DRAWER_SIZE, PLEASE_SELECT } from "@/util/constant";
import { getNavbarDetailApi, updateNavbarApi } from "@/api/modules/websites/navbar.api";

export default {
  props: ["tableData"],
  data() {
    return {
      visible: false,
      placeholderSelect: PLEASE_SELECT,
      form: {
        id: "",
        moduleName: "",
        mOrder: 1,
        pId: "",
        isOut: true,
        showFlag: true,
        navFlag: 1,
        outHref: "",
      },
      outFlag: true,
      optionProps: {
        value: "moduleId",
        label: "moduleName",
        children: "childList",
        checkStrictly: true,
      },
      drawerSize: DRAWER_SIZE,
    };
  },

  methods: {
    async init(id) {
      const res = await getNavbarDetailApi(id);
      this.parentId = res.pId;
      this.id = res.moduleId;
      this.form.moduleName = res.moduleName;
      this.form.mOrder = res.mOrder;
      this.form.isOut = res.isOut;
      this.form.outHref = res.outHref;
      this.form.showFlag = res.showFlag;
      this.form.pId = res.pId;
      this.outFlag = res.isOut
      this.visible = true;
    },
    handleClose() {
      this.visible = false;
    },
    async handleAdd() {
      if (Array.isArray(this.form.pId)) {
        this.form.pId = this.form.pId.slice(-1)[0];
      } else {
        this.form.pId = this.parentId;
      }
      this.form.id = this.id;
      this.form.navFlag = 1;
      await updateNavbarApi(this.form);
      this.$message({
        message: "成功",
        type: "success",
      });
      this.form = {
        id: "",
        moduleName: "",
        mOrder: 1,
        pId: "",
        isOut: true,
        showFlag: true,
        navFlag: 1,
        outHref: "",
      };
      this.outFlag = true;
      this.visible = false;
      this.$emit("getParentTableData");
    },
    handleOut(data) {
      this.outFlag = data
    }
  },
};
</script>
<style scoped>
.select-width {
  width: 100%;
}
</style>
